﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Class Breaks Renderer</title>

      <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    <style>
      html, body, #map{
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
 
    <script>
        var map;
        require([
          "esri/map", "esri/layers/FeatureLayer",
          "esri/InfoTemplate", "esri/symbols/SimpleFillSymbol",
          "esri/renderers/ClassBreaksRenderer",
          "esri/Color", "dojo/dom-style", "dojo/domReady!"
        ], function (
          Map, FeatureLayer,
          InfoTemplate, SimpleFillSymbol,
          ClassBreaksRenderer,
          Color, domStyle
        ) {
            map = new Map("map", {
                basemap: "streets",
                center: [-98.215, 38.382],
                zoom: 7,
                slider: false 
            });

            var symbol = new SimpleFillSymbol();
            symbol.setColor(new Color([150, 150, 150, 0.5]));

    
            var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");//定义字段类渲染器
            renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
            renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
            renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
            renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
            renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

            var infoTemplate = new InfoTemplate("${NAME}", "${*}");
            var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
                mode: FeatureLayer.MODE_SNAPSHOT,//根据表达式和时间获取信息
                outFields: ["*"],
                infoTemplate: infoTemplate
            });

            featureLayer.setDefinitionExpression("STATE_NAME = 'Kansas'");
            featureLayer.setRenderer(renderer);
            map.addLayer(featureLayer);
        });
    </script>
  </head>
  
  <body>
    <div id="map"></div>
  </body>

</html>